<template>
  <div class="contact-pages">
    <!-- 顶部栏 -->
    <cp-nav-bar title="通讯录"></cp-nav-bar>
    <template v-if="isShow">
      <van-cell :border="false" @click="isShow = !isShow">
        <div class="contact-item">
          <van-icon name="search" size="20" />
          <span class="contact-item-search">搜索</span>
        </div>
      </van-cell>
      <div style="height: 10px"></div>
      <van-cell :border="false" @click="seeNewFriend">
        <div class="contact-item">
          <cp-icon name="contact-new-friends" class="contact-item-icon"></cp-icon>
          <span class="contact-item-text">新的朋友</span>
        </div>
      </van-cell>
      <van-index-bar :sticky="false" :index-list="indexList">
        <template v-for="item in indexList" :key="item">
          <van-index-anchor :index="item" />
          <van-cell v-for="data in groupList[item]" :key="data.user_id" @click="toChat(data)"
            ><div class="contact-item">
              <van-image
                width="38px"
                height="38px"
                fit="cover"
                radius="4px"
                :src="data.avatar"
              ></van-image>
              <span class="contact-item-text">{{ data.friend_name }}</span>
            </div>
          </van-cell>
        </template>
      </van-index-bar>
    </template>
    <template v-else>
      <div class="search-box">
        <input type="text" placeholder="搜索" @input="searchDebounce" ref="inputRef" />
        <button @click="cancel">取消</button>
      </div>
      <div class="search-content">
        <template v-if="searchList.length > 0">
          <van-cell v-for="item in searchList" :key="item.friend_id" @click="toChat(item)"
            ><div class="contact-item">
              <van-image
                width="38px"
                height="38px"
                fit="cover"
                radius="4px"
                :src="item.avatar"
              ></van-image>
              <span class="contact-item-text">{{ item.friend_name }}</span>
            </div>
          </van-cell>
        </template>
        <template v-else>
          <div class="search-empty">- 搜索结果为空 -</div>
        </template>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { getGroupFriendList, getSearchFriendList } from '@/services/friend'
import type { friend } from '@/types/friend'
import { debounce } from 'lodash'
import { nextTick, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const indexList = ref<string[]>([])
const groupList = ref<{ [key: string]: friend[] }>({})
const isShow = ref(true)

const getfrendList = async () => {
  const res = await getGroupFriendList()
  indexList.value = res.data.groupList
  groupList.value = res.data?.groupedData
}
getfrendList()

const router = useRouter()
const seeNewFriend = () => {
  router.push('/newFriend')
}
const toChat = (data: friend) => {
  router.push({
    path: '/chat',
    query: {
      sender_id: data.friend_id
    }
  })
}
const searchList = ref<friend[]>([])
const search = async (e: Event) => {
  const inputElement = e.target as HTMLInputElement
  if (inputElement.value) {
    const res = await getSearchFriendList(inputElement.value)
    searchList.value = res.data
  }
}
const searchDebounce = debounce(search, 500)
const cancel = () => {
  isShow.value = true
  searchList.value = []
}
const inputRef = ref<HTMLInputElement | null>(null)
watch(
  () => isShow.value,
  (value) => {
    if (!value) {
      nextTick(() => {
        inputRef.value?.focus()
      })
    }
  }
)
</script>
<style lang="scss" scoped>
.contact-pages {
  padding-top: 46px;
  background-color: var(--bg-primary);
  height: calc(100vh - 93px);
  .contact-item {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    color: var(--cp-contact-color);

    .contact-item-icon {
      width: 40px;
      height: 40px;
    }
    .contact-item-text {
      margin-left: 12px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      flex: 1;
      text-align: left;
    }
    .contact-item-search {
      font-size: 16px;
      color: rgba(153, 153, 153, 1);
      margin-left: 14px;
    }
  }
  .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    background-color: var(--contact-input-box);
  }

  .search-box input[type='text'] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 14px;
    background-color: var(--bg-tertiary);
  }

  .search-box button {
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    /* background-color: #007bff; */
    color: var(--cp-contact-color);
    background-color: var(--bg-tertiary);
    font-size: 14px;
    cursor: pointer;
  }
  .search-empty {
    text-align: center;
    margin-top: 20px;
    color: rgba(153, 153, 153, 1);
  }
}
:deep(.van-cell) {
  padding: 10px;
}
</style>
